<template>
  <div class="app-container">
    <el-select v-model="host" placeholder="选择主机">
      <el-option
        v-for="item in hostOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>    {{host}}
    <el-select v-model="freq" placeholder="选择频率(秒)">
      <el-option
        v-for="item in freqOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>    {{freq}}
    
    <el-row :gutter="100">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <gauge-chart :chart-data="gaugeChartData"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <res-pie-chart :chart-data="pieChartData"/>
        </div>
      </el-col>
    </el-row>
    
    <line-chart class="chart-wrapper" :chart-data="lineChartData1"/>
    
    <el-row :gutter="100">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <line-chart :chart-data="lineChartData2"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <line-chart :chart-data="lineChartData3"/>
        </div>
      </el-col>
    </el-row>
    
    
  </div>
</template>

<script>
  
const host = [{
          value: 'host1',
          label: '主机1'
        }, {
          value: 'host2',
          label: '主机2'
        }, {
          value: 'host3',
          label: '主机3'
        },
      ]
const freq = [{
          value: 'freq1',
          label: '5'
        }, {
          value: 'freq2',
          label: '10'
        }, {
          value: 'freq3',
          label: '15'
        },
      ]
const pieChartData = {
  resourceType:  '磁盘',
  data: [3,12],
  }
const lineChartData = [
    {resourceType:  '内存',
    data: [3,12],},
    {resourceType:  '磁盘',
    data: [3,12],},
    {resourceType:  '网络',
    data: [3,12],},
    ]
import LineChart from './components/LineChart'
import GaugeChart from './components/GaugeChart'
import resPieChart from './components/resPieChart'
export default {
  name: 'Monitor',
  components: {
    LineChart,
    GaugeChart,
    resPieChart,
  },
  data() {
    return {
      hostOptions: host,
      freqOptions: freq,
      pieChartData : pieChartData,
      gaugeChartData: 37,
      lineChartData1: lineChartData[0],
      lineChartData2: lineChartData[1],
      lineChartData3: lineChartData[2],
      
      host: '',
      freq: '',
    }
  },
  created(){
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 32px;
  // background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fffef9;
    // padding: 16px;
    margin-top: 32px;
  }
}
</style>
